<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>音乐管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="/layui.all.js"></script>
		<link rel="stylesheet" href="/css/layui.css" />
		<link href="/css/Global.css" rel="stylesheet" type="text/css" media="all" />

	</head>

	<body>

		<span hidden="hidden" id="musicId"></span>
		<table class="layui-hide" id="test" lay-filter="test"></table>
		 <audio  id="playMusic" controls="controls" loop="false" hidden="true">
		
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs"  lay-event="play"  >试听</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">选中</a>
		</script>

		
	</body>

	<script>
		$(function(){
			$("#musicId").click(function(){
				layer.msg("请选中音乐");
			})
		})
		layui.use('table', function() {
			var table = layui.table,
				form = layui.form;
			table.render({
				elem: '#test',
				url: '/data/music.json',
				cellMinWidth: 80,
				cols: [
					[{
							type: 'numbers',
							title: '序号',
							width: 80
						}, {
							field: 'title',
							title: '音乐名'
						}, {
							field: 'singer',
							title: '演唱者'
						}, {
							field: 'url',
							title: '地址'
						},
						{
							fixed: 'right',
							title: '操作',
							toolbar: '#barDemo',
							width: 150
						}
					]
				],
				page: true
			});

			//监听锁定操作
			form.on('checkbox(lockDemo)', function(obj) {
				layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
			});

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//console.log(obj)
				if(obj.event === 'del') {
					$("#musicId").text(data.id+","+data.title+"-"+data.singer);
				} else if(obj.event === 'play') {
					$("#playMusic").attr("src",obj.data.url)
					 var myAuto = document.getElementById('playMusic').play();
				}
			});
			
		});
	</script>

</html>